<!-- vue3 页面模板 -->
<template>
	<zh-app ref="app">
		<zh-navbar :followTheme="true" title="表单例子" :shadow="0" hide-home></zh-navbar>
		<zh-form @submit="confirm" ref="formRef" v-model="form" :label-width="150" inputAlign="left" :padding="[0, 0]"
			:transprent="true">
			<zh-card title="测试" :margin="[0, 0]">
				<template v-slot:content>
					<zh-form-desc label="测试2" v-model="form.a" :transprent="false" :prefixWidth="180" color="red"
						inputAlign="right" suffixLabel="元"></zh-form-desc>
					<zh-form-input :transprent="false" desc="你可以点击提交表单来验证" required label="测试" type="idcard"
						suffix="tmicon-clock-fill" showClear field="b" v-model="form.b" color="primary"
						:rules="[{ required: true, message: '请输入66', validator: (val) => val == '66' }]">
					</zh-form-input>
					<zh-form-switch required label="开关" field="j" v-model="form.j"></zh-form-switch>
					<zh-form-rate required label="评分" field="k" v-model="form.k"></zh-form-rate>
					<zh-form-input layout="vertical" desc="你可以点击提交表单来验证" required label="测试" suffix="tmicon-clock-fill"
						showClear field="c" v-model="form.c" color="primary"
						:rules="[{ required: true, message: '请输入66', validator: (val) => val == '66' }]">
					</zh-form-input>
					<zh-form-select :transprent="false" :round="3" desc="你可以点击提交表单来验证" inputAlign="right" required
						color="primary" label="单选" suffix="tmicon-clock-fill" showClear field="d" v-model="form.d"
						:options="options">
					</zh-form-select>
					<zh-form-select desc="你可以点击提交表单来验证" required label="多选" inputAlign="right"
						suffix="tmicon-clock-fill" showClear field="e" v-model="form.e" v-model:modelStr="form.stre"
						:options="options1" mode="multiple">
					</zh-form-select>
					<zh-form-checkbox :transprent="false" field="ff" desc="你可以点击提交表单来验证" required color="primary"
						label="多选checkbox" v-model="form.ff" :options="options1"></zh-form-checkbox>
					<zh-form-radio :transprent="false" field="gg" desc="你可以点击提交表单来验证" required color="primary"
						label="单选radio" v-model="form.gg" v-model:modelStr="form.h" :options="options1"></zh-form-radio>
					<zh-form-select required label="下拉框后端" suffix="tmicon-clock-fill" showClear :lazy="true"
						mode="single" :fieldNames="{ label: 'appName', value: 'appId' }" funcCode="application0012"
						searchField="appName" field="i" v-model="form.i">
					</zh-form-select>
					<zh-form-datetime v-model="form.dd" field="dd" label="日期" model="day" @confirm="dateConfirm"
						required inputAlign="right" dateColor="green"></zh-form-datetime>
					<zh-form-datetime v-model="form.p" field="p" label="日期时间" model="datetime"
						dateColor="green"></zh-form-datetime>
					<zh-form-datetime v-model="form.l" field="l" label="时间" showFormat="HH:mm" model="time"
						dateColor="green"></zh-form-datetime>
					<zh-form-datetime ref="prettyRef" field="m" :round="3" label="预约时间" :transprent="false"
						v-model="form.m" v-model:endValue="form.n" dateColor="green"
						model="prettyTime"></zh-form-datetime>
					<zh-form-select color="primary" required label="树结构" funcCode="dict0026" field="tree" type="tree"
						v-model="form.tree" :lazy="true" :expandedAll="true" :checkStrictly="true" :checkable="false"
						mode="multiple"></zh-form-select>
					<zh-form-upload desc="请上传图片" required label="图片上传" v-model="form.ee" field="ee"
						:defaultValue="[{ remarks: '户口本第一页' }, { remarks: '555' }]" :fileType="['image']"
						:rows="5"></zh-form-upload>
				</template>
			</zh-card>
			<zh-form-item :border="false">
				<view class="flex flex-row">
					<view class="flex-1 mr-32">
						<zh-button form-type="submit" label="提交表单" block></zh-button>
					</view>
					<view class="flex-1">
						<zh-button :shadow="0" text form-type="reset" label="重置表单" block></zh-button>
					</view>
				</view>
			</zh-form-item>
		</zh-form>

		<zh-checkbox-group v-model="test">
			<zh-checkbox label="123" value="1"></zh-checkbox>
			<zh-checkbox label="456" value="2"></zh-checkbox>
		</zh-checkbox-group>

		<checkbox value="cb" checked="true" />选中
		<zh-city-cascader v-model="form.city"></zh-city-cascader>
		<zh-select desc="你可以点击提交表单来验证" required label="多选" suffix="tmicon-clock-fill" showClear field="c"
			v-model="form.c" :options="options1" mode="multiple"
			:rules="[{ required: true, message: '请输入66', validator: (val) => val == '66' }]">
		</zh-select>
		<zh-dropdown position="bl" color="grey-darken-4" :width="220" :list="list" rangKey="dictValue">
			<zh-text label="下拉选项例子"></zh-text>
		</zh-dropdown>
		<zh-button @click="onClick">测试</zh-button>
		<zh-form v-model="form">
			<zh-form-input :border="false" v-model="form.a"></zh-form-input>
			<zh-form-input :border="false" v-model="form.b"></zh-form-input>
		</zh-form>
		<zh-codeinput :border="2" :round="4" :count="6" @click="show = true" :value="form.o"></zh-codeinput>
		<z-paging ref="paging" :fixed="false" height="300rpx" use-virtual-list @query="onQueryList">
			<template v-slot:empty>
				<zh-result :showBtn="false" title="没有可供选择的数据" subTitle="请重新输入关键字搜索"></zh-result>
			</template>
			<template v-slot:cell="{ item, index }">
				<zh-cell :margin="[0, 0]" :titleFontSize="30" :title="typeof item == 'string' ? item : item.dictValue">
					<template v-slot:right>
						<zh-radio :value="typeof item == 'string' ? item : item.dictKey"
							@change="radioChange($event, item)"></zh-radio>
					</template>
				</zh-cell>
			</template>
		</z-paging>
		<zh-keyboard type="card" :maxLength="6" v-model:show="show" v-model="form.o"></zh-keyboard>
		<zh-checkbox-group v-model="test">
			<zh-checkbox label="123" value="1"></zh-checkbox>
			<zh-checkbox label="456" value="2"></zh-checkbox>
		</zh-checkbox-group>
		<zh-checkbox-group v-model="test">
			<zh-checkbox label="123" value="1"></zh-checkbox>
			<zh-checkbox label="456" value="2"></zh-checkbox>
		</zh-checkbox-group>
		<zh-select :transprent="false" :round="3" desc="你可以点击提交表单来验证" inputAlign="right" required color="primary"
			label="单选" suffix="tmicon-clock-fill" showClear v-model="form.b" :options="options"
			:rules="[{ required: true, message: '请输入66', validator: (val) => val == '66' }]">
		</zh-select>
	</zh-app>
</template>
<script lang="ts" setup name="formDemo">
	import { ref, reactive, onMounted } from 'vue';

	// ------------------接收传入参数(组件)-------------------
	const formRef = ref();
	const prettyRef = ref();
	const form = ref({
		city: ['110102'],
		a: null,
		b: null,
		c: null,
		d: null,
		e: null,
		f: null,
		g: null,
		h: null,
		i: null,
		j: null,
		l: null,
		m: null,
		n: null,
		o: null,
		p: null,
	});
	const options = ref([
		{ dictKey: '1', dictValue: '有效' },
		{ dictKey: '0', dictValue: '无效' },
	]);
	const confirm = (e) => {
		console.log(e)
	}
	const options1 = ref([
		{ dictKey: '1', dictValue: '有效' },
		{ dictKey: '0', dictValue: '无效' },
		{ dictKey: '2', dictValue: '测绘师的额' },
		{ dictKey: '4', dictValue: '围殴任务二的额22' },
		{ dictKey: '5', dictValue: '围殴任务二33123的额' },
		{ dictKey: '3', dictValue: '围殴任务二的额围殴任务二的额围殴任务二的额围殴任务二的额' },
	]);
	const list = ref([
		{ dictValue: '苹果', dictKey: '1', icon: 'tmicon-collection' },
		{ dictValue: '菠萝', dictKey: '2', icon: 'tmicon-account-plus' },
		{ dictValue: '电话', dictKey: '3', icon: 'tmicon-phone' },
	]);
	const tree = ref('2');
	const show = ref(false);
	const test = ref(['1']);
	const str = ref();
	function onClick() {
		console.log(form.value);
		console.log(str.value);
		console.log(prettyRef.value.orderDateTime);
		form.value.j = '0';
	}
	let paging = ref();
	onMounted(() => {
		onQueryList();
	});
	function onQueryList(pageNo, pageSize) {
		paging.value?.setLocalPaging(options1.value);
	}
	function dateConfirm(val, str) {
		console.log(val);
		console.log(str);
		console.log('value=' + form.value.d);
	}
	watch(
		() => tree.value,
		(val) => {
			console.log(val);
		},
		{
			immediate: true,
		}
	);
	watch(
		() => form.value,
		(val) => {
			console.log(33);
			console.log(val);
			console.log(val.city);
		},
		{
			deep: true,
		}
	);
	// ------------------钩子函数----------------------------
	// 初始化
	onMounted(() => { });

	// ------------------变量区------------------------------

	// ------------------方法区------------------------------
</script>
<style lang="scss" scoped></style>